<template>
	<view class="user">
		<view class="user_info">
			<view class="user_info">
				<view class="user_info_avatar">
					<rui-icons icon="user-full" size="90" color="#ccc"></rui-icons>
				</view>
				<view class="user_info_box">
					<view class="user_info_box_nickname">
						{{user?.info?.name || '未登录'}}
					</view>
					<view class="user_info_box_grade">
						{{grade[user?.info?.grade] || '普通会员'}}
					</view>
				</view>
			</view>
		</view>
		<view class="user_expire" v-if="user?.info?.expire">
			{{user?.info?.expire}} 到期
		</view>
	</view>

	<view class="exchange">
		<view class="exchange_input">
			<input type="text" placeholder="请输入兑换验证码" v-model="content" />
		</view>
		<view class="exchange_btn" @click="exchange">
			兑换
		</view>
	</view>

	<view class="promo">
		<view class="promo_info">
			<view class="promo_info_item">
				<view class="promo_info_item_value people">{{user.promo?.info?.total || 0}}</view>
				<view class="promo_info_item_name">
					推广人数
				</view>
			</view>
			<view class="promo_info_item">
				<view class="promo_info_item_value people">{{user.promo?.info?.buy || 0}}</view>
				<view class="promo_info_item_name">
					购买人数
				</view>
			</view>
			<view class="promo_info_item">
				<view class="promo_info_item_value month">{{user.promo?.info?.rate || 0}}</view>
				<view class="promo_info_item_name">
					赠送时长
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	import {
		userStore
	} from "@/store/index.js"


	const user = userStore();
	const grade = ref({
		1: "普通会员",
		2: "VIP会员"
	})
	let content = ref("")
	const emits = defineEmits(['change'])
	const exchange = () => {
		if (!content.value) {
			uni.$rui.toast("请输入兑换验证码")
			return false;
		}
		emits('change', content.value)
		content.value = "";
	}
</script>

<style lang="scss" scoped>
	.people {
		&::after {
			content: "人";
			font-size: 24rpx;
			color: #aaa;
		}
	}

	.month {
		&::after {
			content: "月";
			font-size: 24rpx;
			color: #aaa;
		}
	}

	.exchange {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx;
		background: #f6f7f8;
		padding: 10rpx 10rpx 10rpx 30rpx;
		border-radius: 10rpx;

		&_btn {
			background: var(--color);
			color: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			padding: 10rpx 30rpx;
		}
	}

	.promo {
		margin: 30rpx 20rpx 20rpx;
		background: #333;
		padding: 30rpx;
		border-radius: 10rpx;

		&_info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&_item {

				&_value {
					color: #fff;
					font-size: 40rpx;
					text-align: center;
				}

				&_name {
					font-size: 24rpx;
					color: #ddd;
				}
			}

		}
	}

	.user {
		display: flex;
		justify-content: space-between;
		align-items: end;
		margin: 50rpx 20rpx 40rpx;

		&_info {
			display: flex;
			align-items: center;

			&_box {
				margin-left: 10rpx;

				&_nickname {
					font-size: 32rpx;
					font-weight: bold;
					color: var(--color);
				}

				&_grade {

					font-size: 24rpx;
				}
			}


		}

		&_expire {
			border-radius: 50rpx;
			background: #f5f6f7;
			border: 1rpx solid #ddd;
			padding: 4rpx 16rpx;
			font-size: 24rpx;
			color: #999;
		}

	}
</style>